<template>
  <div>
    <div>
      <el-checkbox v-model="direction" @change="refresh">xy轴切换</el-checkbox>
      <el-checkbox v-model="show_label" @change="refresh">添加label</el-checkbox>
    </div>
    <common-echarts :option="option" ref="echarts"></common-echarts>
  </div>
</template>

<script>
import CommonEcharts from "./echarts.vue";

export default {
  name: "PieEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      const { direction, show_label } = this;

      // 添加label在柱子上以显示具体数值
      const label = {
        show: true,
        position: direction ? "right" : "top",
      };

      let series = [
        {
          name: "销量",
          type: "bar",
          data: [25, 220, 236, 210, 210, 220],
        },
        {
          name: "库存",
          type: "bar",
          data: [15, 120, 136, 110, 110, 120],
        },
      ];

      if (show_label) {
        series = series.map((item) => {
          return Object.assign(
            {
              label,
            },
            item
          );
        });
      }

      const xAxis = {
        type: "category",
        data: [1, 2, 3, 4, 5, 6],
      };

      const yAxis = {
        type: "value",
        // 'value' 数值轴，适用于连续数据
        // 'category' 类目轴，适用于离散的类目数据
        // 'time' 时间轴，适用于连续的时序数据
      };

      return {
        title: {
          text: "折线图",
        },
        xAxis: direction ? yAxis : xAxis,
        yAxis: direction ? xAxis : yAxis,
        legend: {
          data: ["销量", "库存"],
        },
        series: series,
      };
    },
  },
  data() {
    return {
      direction: false,
      // 指定图表的配置项和数据
      show_label: false,
    };
  },
  methods: {
    refresh() {
      console.log("option:", this.option);
      this.$nextTick(this.$refs.echarts.refresh);
    },
  },
};
</script>
